import { Button, Flex, Input, Popover, Radio } from "antd";
import React, { useContext, useState } from "react";
import { CloseOutlined } from "@ant-design/icons";
import { MyContext } from "../../../../../store";

export default (props: {
  children: React.ReactNode;
}) => {
  const { sipContext } = useContext(MyContext);
  const [phone, setPhone] = useState("");
  const [open, setOpen] = useState(false);

  function handleCall() {
    sipContext?.sipClient?.call(phone);
    setOpen(false);
  }

  const handleOpenChange = (newOpen: boolean) => {
    setOpen(newOpen);
    setPhone("");
  };

  return <Popover
    trigger="click"
    open={open}
    onOpenChange={handleOpenChange}
    zIndex={99999}
    content={
      <Flex align={"center"} vertical={true} className={"w-450"}>
        <Radio.Group defaultValue="a" size="large">
          <Radio.Button value="a">外呼</Radio.Button>
          <Radio.Button value="b">内部呼叫</Radio.Button>
          <Radio.Button value="c">话机呼叫</Radio.Button>
        </Radio.Group>

        <Flex className={"my-10"}>
          <Input size={"large"}
                 className={"text-center text-2xl"}
                 onChange={(e => setPhone(e.target.value))}
                 placeholder="请输入外呼号码"
                 variant="borderless"
                 value={phone}
          />
          <CloseOutlined className={"cursor-pointer text-blue-500"} onClick={() => setPhone("")} />
        </Flex>

        <Button type={"primary"} disabled={!phone} shape={"round"} onClick={() => handleCall()}> 拨打电话</Button>
      </Flex>
    }
    placement={"right"}
  >
    {props?.children}
  </Popover>;
}
